<template>
  <div class="loading-container" :class="{ 'loading-fullscreen': fullscreen }">
    <!-- 旋转圆环加载器 -->
    <div v-if="type === 'spinner'" class="loading-spinner">
      <div class="spinner-ring"></div>
      <div class="spinner-text">{{ text }}</div>
    </div>
    
    <!-- 脉冲点加载器 -->
    <div v-else-if="type === 'dots'" class="loading-dots">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="loading-text">{{ text }}</div>
    </div>
    
    <!-- 从左到右依次变小的矩形条加载器 -->
    <div v-else-if="type === 'bars'" class="loading-bars">
      <div class="bar bar-1"></div>
      <div class="bar bar-2"></div>
      <div class="bar bar-3"></div>
      <div class="loading-text">{{ text }}</div>
    </div>
    
    <!-- 骨架屏加载器 -->
    <div v-else-if="type === 'skeleton'" class="loading-skeleton">
      <div class="skeleton-item skeleton-avatar"></div>
      <div class="skeleton-content">
        <div class="skeleton-line skeleton-title"></div>
        <div class="skeleton-line skeleton-text"></div>
        <div class="skeleton-line skeleton-text"></div>
      </div>
    </div>
    
    <!-- 默认加载器 -->
    <div v-else class="loading-default">
      <div class="loading-icon">
        <svg class="animate-spin" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </div>
      <div class="loading-text">{{ text }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['spinner', 'dots', 'bars', 'skeleton', 'default'].includes(value)
  },
  text: {
    type: String,
    default: ''
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'md',
    validator: (value) => ['sm', 'md', 'lg'].includes(value)
  }
})
</script>

<style scoped>
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.loading-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

/* 旋转圆环加载器 */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top: 3px solid var(--primary-color, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-text {
  color: #6b7280;
  font-size: 0.875rem;
}

/* 脉冲点加载器 */
.loading-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.loading-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-color, #3b82f6);
  animation: pulse 1.4s ease-in-out infinite both;
}

.loading-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-dots .dot:nth-child(3) {
  animation-delay: 0s;
}

.loading-text {
  color: #6b7280;
  font-size: 0.875rem;
}

/* 从左到右依次变小的矩形条加载器 */
.loading-bars {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.loading-bars .bar {
  width: 10px;
  height: 20px;
  background-color: var(--primary-color, #3b82f6);
  animation: bars-animation 0.6s infinite ease-in-out;
}

.loading-bars .bar-1 {
  animation-delay: -0.25s;
}

.loading-bars .bar-2 {
  animation-delay: -0.15s;
}

.loading-bars .bar-3 {
  animation-delay: 0s;
}

.loading-text {
  color: #6b7280;
  font-size: 0.875rem;
}

/* 骨架屏加载器 */
.loading-skeleton {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-line {
  height: 16px;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-title {
  width: 60%;
}

.skeleton-text {
  width: 100%;
}

.skeleton-text:last-child {
  width: 80%;
}

/* 默认加载器 */
.loading-default {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.loading-icon {
  color: var(--primary-color, #3b82f6);
}

.loading-text {
  color: #6b7280;
  font-size: 0.875rem;
}

/* 动画定义 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes bars-animation {
  0%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.3);
    opacity: 0.5;
  }
}

/* 响应式尺寸 */
.loading-container.size-sm .spinner-ring {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

.loading-container.size-lg .spinner-ring {
  width: 56px;
  height: 56px;
  border-width: 4px;
}
</style>
